<template>
	<view class="login_layout" flex="main:center cross:center">
		<view class="login_container" flex>
			<view class="left" flex="dir:top main:justify cross:center">
				<view flex="cross:center">
					<image src="/static/aidex/images/login-white.png" style="width: 104upx;height:104upx;">
						<view class="margin_left_15">
							<text>消防火调智能终端</text>
							<p>火调智能一体化勘验系统pad端</p>
						</view>
				</view>
				<image src="/static/aidex/images/login_left_bg.png">
			</view>
			<view class="right">
				<text style="margin-bottom:104upx">欢迎登录消防火调智能终端</text>
				<u-form ref="formData" :model="formData" status-icon :rules="rules" class="demo-formData">
					<u-form-item prop="username" class="border_bottom">
						<view flex="cross:center" style="width: 100%;">
							<view style="color:#1B44AB">
								<!-- <svg-icon icon-class="logn_form_icons (2)" /> -->
								账号：
							</view>
							<u-input v-model="formData.username" clearable placeholder="请输入账号" class="login_input flex_1" />
						</view>
					</u-form-item>
					<u-form-item prop="password" class="border_bottom" style="margin-top:80upx">
						<view flex="cross:center" style="width: 100%;">
							<view style="color:#1B44AB">
								<!-- <svg-icon icon-class="logn_form_icons (1)" /> -->
								密码：
							</view>
							<u-input v-model="formData.password" clearable placeholder="请输入密码" class="login_input flex_1" type="password" autocomplete="off" />
						</view>
					</u-form-item>
					<u-button v-if="vuex_config.isConnected" style="margin-top: 80rpx;" round :disabled="!formData.password || !formData.username" type="primary" class="custum_btn" @click="submit('1')">登录</u-button>
					<u-button v-else style="margin-top: 80rpx;" round :disabled="!formData.password || !formData.username" type="success" class="custum_btn" @click="off_submit">离线登录</u-button>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	import store from "@/store"
	import config from '@/common/config.js';
	import {
		mapGetters,
		mapMutations
	} from "vuex"
	import {
		getModulesListToBasicData,
		getDictData,
		getAllUserList,
		getTempleteList
	} from '@/common/environmentalApi/index.js'
	import {
		getListFromNetwork
	} from '@/common/environmentalApi/network.js'
	import {
		getBasicInfoFromLocalData
	} from '@/static/common/js/padLocalFileHandler.js'
	export default {
		data() {
			return {
				formData: {
					username: 'test',
					password: '123456',
					// username: '姜立平',
					// password: '',
				},
				rules: {
					username: [{
						required: true,
						message: '* 账号输入错误，请重新输入',
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: '* 密码输入错误，请重新输入',
						trigger: 'change'
					}]
				}
			}
		},
		computed: {
			...mapGetters(['isNetworkConnected'])
		},
		methods: {
			...mapMutations(['SET_BASIC_INFO', '$uStore']),
			async submitTransfer(type) {
				const isConnected = this.vuex_config.isConnected

				if (this.vuex_config.isConnected) {
					this.submit(type)
				} else {
					await this.off_submit()
				}
			},
			submit(loginType) {
				this.$u.http.config.baseUrl = config.baseUrl
				if (this.formData.username.length == 0) {
					this.$u.toast('请输入账号');
					return;
				}
				if (this.formData.password.length == 0) {
					this.$u.toast('请输入密码');
					return;
				}
				this.$u.api.login({
						username: this.formData.username,
						password: this.formData.password,
						validCode: this.formData.validCode,
						loginType: loginType
					})
					.then(res => {
						if (res.msg) {
							this.$u.toast(res.msg);
						}
						if (res.code == '200') {
							this.setBasicData(this.isNetworkConnected)
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/sys/home/index'
								});
							}, 500);
							uni.setStorage({
								key: 'isLogin',
								data: {
									isLogin: true,
									user: res.user,
									token: res.token
								},
								success: function() {}
							})
						}
						if (res.isValidCodeLogin) {
							this.isValidCodeLogin = true;
							this.refreshImgValidCode();
						}
					}).catch((err) => {
						console.log(err)
						console.error(err)
					});
			},
			async off_submit() {
				let res = await getBasicInfoFromLocalData()
				if (!res) {
					uni.showModal({ //提醒用户更新
						title: "提示",
						content: '请先在线登录后在断网使用',
					})
					return
				}
				const {
					userInfoList
				} = res
				const currentUser = userInfoList.find(item => item.userName == this.formData.username)
				this.$u.vuex('vuex_user', currentUser);
				uni.clearStorage();
				uni.removeStorage({
					key: 'isLogin',
				});
				this.setBasicData(this.isNetworkConnected)
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/sys/home/index'
					});
				}, 500);
			},
			setBasicData(val) {
				console.log('setBasicData', val);
				if (val) {
					this.$nextTick(async () => {
						// 案卷列表
						const remoteArchivesList = getListFromNetwork()
						// 案卷类型 模块列表
						const archivesTypeList = getModulesListToBasicData()
						// 获取词典数据
						const dictData = getDictData()
						// 获取所有用户
						const allUserList = getAllUserList()
						// 获取 笔录模板
						const templeteList = getTempleteList()
						Promise.allSettled([remoteArchivesList, archivesTypeList, dictData, allUserList, templeteList]).then(res => {
							const results = res.map(item => {
								if (item.status === 'fulfilled') {
									return item.value
								}
								return null
							})
							const [remoteArchivesListRes, archivesTypeListRes, dictDataRes, allUserListRes, templeteListRes] = results
							console.log(templeteListRes);
							const vuex_basicData = {
								remoteArchivesList: remoteArchivesListRes,
								archivesTypeList: archivesTypeListRes,
								dictData: dictDataRes,
								allUserList: allUserListRes,
								templeteList: templeteListRes
							}
							// 存储数据到本地
							// store.commit('SET_BASIC_INFO', vuex_basicData);
							this.SET_BASIC_INFO(vuex_basicData)
						})
					})
				} else {
					getBasicInfoFromLocalData().then(data => {
						console.log(data.templeteList);
						this.$uStore({
							name: 'vuex_basicData',
							value: data
						})
					})
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	.login_layout {
		width: 100vw;
		// height: calc(100vh - 44px);
		// /* #ifdef H5 */
		// /* #endif  */
		height: 100vh;
		padding: 40upx;
		background: url(../../../hybrid/html/login_content_bg.png);
		background-size: cover;

		.login_container {
			background: #FFFFFF;
			box-shadow: 0 16upx 56upx 0 rgba(0, 39, 137, 0.3);
			border-radius: 32upx;

			.left {
				width: 800upx;
				height: 1000upx;
				background: #1B44AB;
				padding: 80upx 46upx;

				text {
					font-size: 52upx;
					font-weight: 400;
					color: #FFFFFF;
					width: 448upx;
				}

				p {
					letter-spacing: 4upx;
					font-size: 28upx;
					color: #FFFFFF;
				}
			}

			.right {
				flex: 1;
				padding: 150upx 160upx;
				text-align: center;

				text {
					font-size: 40upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1B44AB;
					font-weight: bold;
					margin-bottom: 40upx;
					display: block;
				}

				.custum_btn {
					width: 672upx;
					color: #fff;
					margin-top: 40upx;
					cursor: pointer;

					&:not(.is-disabled) {
						background: linear-gradient(179deg, #256FDA 0%, #1B44AB 100%);
					}
				}
			}
		}
	}
</style>